Skip to content

feat(nav): remove ion-router integration#31266

Open
ShaneK wants to merge 4 commits into
major-9.0from
FW-6976
Open

feat(nav): remove ion-router integration#31266
ShaneK wants to merge 4 commits into
major-9.0from
FW-6976

Conversation

@ShaneK

@ShaneK ShaneK commented Jul 13, 2026

Copy link
Copy Markdown
Member

Issue number: internal


What is the current behavior?

ion-nav doubles as an ion-router outlet. On load, nav.tsx checks document.querySelector('ion-router') to set a useRouter flag, and ion-nav is listed in the router's OUTLET_SELECTOR. When the router drives it, ion-nav exposes internal setRouteId()/getRouteId() methods, runs router.canTransition() guards inside queueTrns, and calls router.navChanged() on a successful transition so that push/pop, ion-nav-link, and swipe-to-go-back all update the URL. This couples an imperative stack component to URL-based routing

What is the new behavior?

ion-nav is now a standalone imperative stack-navigation component with no ion-router integration. It implements ComponentInterface instead of NavOutlet and drops useRouter, the setRouteId()/getRouteId() methods, the canTransition() guard check, the navChanged() URL update, the root-attribute-with-router warning, and the updateURL nav option. The router no longer lists ion-nav in OUTLET_SELECTOR, so an ion-nav placed inside an ion-router is no longer discovered or driven as a routed outlet

Dropping ion-nav from OUTLET_SELECTOR exposed a hang: a page with an ion-router but no ion-router-outlet or ion-tabs (the #24641 pattern) left waitUntilNavNode() waiting forever, so the router's componentWillLoad never settled and the app never signalled that it finished loading. waitUntilNavNode() now resolves on ionNavWillLoad or a 500ms timeout, and warns in dev when no outlet is found

Does this introduce a breaking change?

  • Yes
  • No

Apps that relied on ion-nav to update the URL (pushing components and expecting the browser URL to change, or having router guards run on nav transitions) should use ion-router-outlet for URL-based routing. An ion-nav can still be used inside a routed page for local, URL-less stack navigation. See the Nav section in BREAKING.md for the migration path.

Other information

BREAKING.md is updated with a new Nav section and route.tsx doc now lists ion-router-outlet instead of ion-nav as the navigation outlet

Preview (nav routing test page):

@ShaneK
ShaneK requested a review from a team as a code owner July 13, 2026 21:54
@ShaneK
ShaneK requested a review from OS-jacobbell July 13, 2026 21:54
@vercel

vercel Bot commented Jul 13, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Jul 16, 2026 4:54pm

Request Review

@github-actions github-actions Bot added package: core @ionic/core package package: react @ionic/react package labels Jul 13, 2026

@thetaPC thetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Comment thread BREAKING.md Outdated

@brandyscarney brandyscarney left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! A few questions on documentation. 👍

Comment on lines +18 to +25
<!--
As of Ionic 9, ion-nav no longer integrates with ion-router. This page
reproduces the pattern from https://github.com/ionic-team/ionic-framework/issues/24641,
where an ion-router and an ion-nav coexist. The ion-nav must manage its own
stack via `root` and ion-nav-link, the URL must never change as the stack
changes, and the page must still finish loading even though the router has no
outlet to drive.
-->

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we document how these work together somewhere? Possibly at https://ionicframework.com/docs/api/nav?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done on the docs PR here: 7e0063a

I didn't want to do it in nav because nav directly tells people not to use it for routing and for routing to use ion-router and I didn't want it to get confusing by immediate talking about routing with ion-nav, so I did it as an example on the ion-router page: https://ionic-docs-git-fw-6976-ionic1.vercel.app/docs/api/router#using-ion-nav-within-a-routed-page

Comment thread BREAKING.md
Comment thread BREAKING.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants